<template>
	
	<view class="contont " style="background-color: #F5F5F5;flex-direction: column;position: relative;" >
		<view class="">
			
	
		<view  v-if="list.length!=0" style="width: 355px;height: 120px;margin-top: 10px;margin-bottom: 10px;position: relative;" v-for="(v,i) in list" :key="i">
			<image src="../../static/img/bg_dk.png" style="width: 355px;height: 120px;" mode=""  @click="order(i)"></image>
			<view class="cent" style="margin-top: 20px;height: 24px;position: absolute;top: 0px;width: 100%;" >
				<text style="font-size: 18px;font-weight: 500;color: #042A58;margin-left: 20px" @click="order(i)">{{v.bankName}}</text>
			<!-- 	<view style="font-size: 15px;color: #97A9BF;margin-left:15px" class="cent" @click="xiu(i)">
					<image src="../../static/img/icon_bianji.png" mode="" style="width: 24px;height: 24px;"></image>修改</view> -->
					
					<view style="font-size: 15px;color: #97A9BF;margin-left:40px;width: 100px;display: flex;align-items: center;" class="" @click="none(i)">
						<image src="../../static/img/icon_shanchu.png" mode="" style="width: 24px;height: 24px;"></image>删除</view>
						
			</view>
			<view style="margin-top: 10px; font-size: 14px;color: #627995;margin-bottom: 20px;height: 14px;position: absolute;top: 41px;" @click="order(i)">
				<text style="margin-left: 20px;">{{v.usePeopleName}}</text>
				<text style="margin-left: 20px;">个人储蓄卡</text> 
			</view>
			<text style="color: #627995;font-size: 18px;margin-left: 13px;height: 18px;position: absolute;top: 84px;left: 8px;" @click="order(i)">{{v.bankAccount}}</text>
		</view>		
		
		 <view v-if="list.length==0" style="display: flex;flex-direction: column;align-items: center;margin-bottom: 260px;">
		 	<image src="../../static/img/pic_wuka@2x.png" mode="" style="width: 240px;height: 150px;margin-top: 10px;"></image>
			<text style="font-size: 18px;color: #000000;margin-top: 20px;">暂无银行卡</text>
			<text style="font-size: 15px;color: #777777;margin-top: 10px;">您还未添加银行卡，请您添加银行卡！</text>
		 </view>
<!-- 		<button v-if="list.length==0" >添加银行卡</button> -->
		<button class="but"  @click="jia">+添加银行卡</button>
		<view class="loading" v-if="list.length>=5">
			{{loadingTxt}}
		</view>
			</view>
	</view>
</template> 

<script>
	import {ajaxs} from '../../apis.js'
	var page=1; var timer=null ;var that=this
	export default {
		data() {
			return {
				loadingTxt:"加载更多",
				shoed:0,
				list:[]
			}
		},
		
		onPullDownRefresh() {
			this.getNews()
		},
		onReachBottom() {
			var that=this
			this.getMoreNews()
		},
		onShow() {
			var that=this
				this.getNews()
		},
		methods: {
			getMoreNews(){
				this.loadingTxt="加载中"
				var that=this
					  uni.showNavigationBarLoading()
					 ajaxs({
					 	url:"/v1/user/bankCard/list",
					 	method:"post",
						data:{offset:page,
						limit:1
						},
					     success(res){
					     console.log(res)
						 if(that.list.length==res.data.total){
						 								  console.log(123)
						 								  that.loadingTxt="已经全部加载"
						 								    uni.hideNavigationBarLoading()
						 									   return false;
						 }
					      that.list=that.list.concat(res.data.list)
							   uni.hideNavigationBarLoading()
					  uni.stopPullDownRefresh()
					  page++
					  that.loadingTxt="加载更多"
					      //请求成功的处理
					      },
						
					    })
			},
			getNews(){
				page=1;
				var that=this
											  uni.showNavigationBarLoading()
										ajaxs({
											url:"/v1/user/bankCard/list",
											method:"post",
											data:{offset:page,
											limit:5
											},
											    success(res){
											    console.log(res)
											    that.list=res.data.list
											 uni.stopPullDownRefresh()
											  uni.hideNavigationBarLoading()
											  page++
											      },
												
											    })
											
			
			
			},
			order(i){
				var pages = getCurrentPages();
				 var prevPage = pages[pages.length - 2]; //上一个页面
				  //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				 prevPage.setData({
				      mycard: {
				       name:this.list[i].bankName,
				       		state:this.list[i].usePeopleName,
				       		Telephone:this.list[i].bankAccount,
				       		// id:this.list[i].idCardNo
				      }
				    })
				    wx.navigateBack({//返回
				      delta: 1
				    })
			},
			jia(){
				uni.navigateTo({
					url:"./cardup?id=1"
				})
			},
			xiu(i){
				console.log(1)
				uni.navigateTo({
					url:"./cardnew?id=1&&cardId="+this.list[i].id+"&bankName="+this.list[i].bankName +"&usePeopleName="+this.list[i].usePeopleName+"&bankAccount="+this.list[i].bankAccount
				})
			},
			none(i){
				var that=this
				var header;
							  header = { 
				
				     'content-type': 'application/json', 
				
				     'cookie':uni.getStorageSync("sessionid")//读取cookie
				
				  };
				uni.request({
					url:"https://www.uhuoda.com/v1/user/bankCard/remove",
					method:"post",
					data:{
						id:that.list[i].id
					},
					header:header,
					success(res){
					if(res.data.status=="OK"){
						ajaxs({
							url:"/v1/user/bankCard/list",
							method:"post",
							success(res){
							console.log(res)
							that.list=res.data.list
							}
						})
					}
					}
				})
			}
		}
	}
</script>

<style>
	.loading{
		line-height: 2em;
		text-align: center;
		color: #888;
		margin-top:30px ;
	}
.contont{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction:column ;
		align-items: center;
	}
	.cent{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	button{
		width:355px;
		height:44px;
		background:rgba(218,224,231,1);
		border-radius:8px;
		color: #FFFFFF;
		margin-bottom: 60px;
	}
	.but{
	width:355px;
	height:44px;
	background:#042A58;
	border-radius:8px;
	color: #FFFFFF;
	margin-top:10px;	
	}
</style>
